<template>
  <view v-if="shenheStatus == 0" class="shop-card">
    <view class="">
      <!-- <view class="title"> 未兑换商品 </view> -->
      <view class="item flex-x-sb" v-for="item in cardData" :key="item.id" @click="clickTobt(item.is_use, item)">
				<view class="item_video">
					<video
					:src="item.url" 
					:enable-progress-gesture="false" 
					:poster="item.pic_url" 
					:show-center-play-btn="false"
					:show-play-btn="false"
          :show-fullscreen-btn="false"
					@loadedmetadata="loadedmetadata"
					></video>
					<i class="iconfont icon-play-fill"></i>
				</view>
        
        <view class="right">
          <view class="info-title text-more-2">
            {{ item.title }}
          </view>
          <view class="flex-x-sb guige">
            <view class="text-more-2">
              <!-- <span v-for="(str, index) in 3" :key="index">
                <span>【当天发】灰蓝色-时尚款</span>
                <span v-show="index < 3 - 1" style="margin: 0 10rpx">|</span>
              </span> -->
							时长：{{ times }}
            </view>
            <view></view>
          </view>
          <view class="flex-y-center flex-x-sb">
            <view class="price"></view>
            <view
              class="flex-y-center flex-x-center"
            >
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- <view class="bottom-button flex-y-center flex-x-sb">
      <view style="font-size: 36rpx">
        ￥<span style="font-size: 60rpx">180.</span><span>06</span>
      </view>
      <view>一键兑换</view>
    </view> -->
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      card_id: '',
      cardData: '',
      cardDetail: '',
			times: "0:00"
    };
  },
  onLoad(params) {
    this.card_id = params?.id;

    this.$utils.hideShareMenu()
  },
  onShow() {
    this.getDetail();
  },
  methods: {
		padding2(num, length) {
		  return (Array(length).join("0") + num).slice(-length);
		 },
		loadedmetadata(e) {
			if (e.detail.duration) {
				
				let duration = Math.floor(e.detail.duration);
				let min = this.padding2(Math.floor(duration / 60), 2);
				let sec = this.padding2(duration % 60, 2);
				this.times = (min + ":" + sec);
			}
		},
    // 获取数据详情
    async getDetail() {
      try {
        const res = await this.$allrequest.coupon.verifyExchangeDetail(
          {
            sale_id: this.card_id,
          },
          true
        );
        this.cardData = res.data.list;
        this.cardDetail = res.data.verifyCardSale;
      } catch (error) {
        this.$utils.toast(error.msg || error);
      }
    },
    clickTobt(display, item) {
      this.$utils.toUrl(
        '/user/write_off_card/card-list/video-detail?id=' +
          this.card_id +
          '&data=' +
          JSON.stringify(item)
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.shop-card {
  padding: 0 24rpx;
  padding-bottom: calc(env(safe-area-inset-bottom));
  > view {
    .title {
      margin-top: 30rpx;
      line-height: 40rpx;
      font-size: 28rpx;
      font-weight: 600;
    }
    .item {
      padding: 30rpx 0;
      border-bottom: 1px solid #f1f1f1;
			.item_video {
				position: relative;
				> video {
				  width: 166rpx;
				  height: 166rpx;
				  background: #f2f2f2;
				  opacity: 1;
				  border-radius: 10rpx;
				  margin-right: 20rpx;
				}
				.iconfont {
					position:absolute;
					top: 0;
					height: 0;
					width: calc(100% - 20rpx);
					height: 100%;
					margin-right: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 50rpx;
					color: rgba(255, 255, 255, 0.7);
				}
			}
      
      .right {
        flex: 1;
        width: 0;

        .info-title {
          font-size: 28rpx;
          line-height: 34rpx;
					display: -webkit-box;
					display: -moz-box;
					white-space: pre-wrap;
					word-wrap: break-word;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical;
					-webkit-line-clamp:2;   /*显示行数*/
					font-weight: 400;
					color: #262626;
        }
        .guige {
          margin-top: 10rpx;
          font-size: 24rpx;
          line-height: 34rpx;
          height: 58rpx;
          color: #8c8c8c;
          > .text-more-2 {
            flex: 1;
            margin-right: 100rpx;
          }
        }
        .price {
          line-height: 60rpx;

          font-size: 32rpx;
          font-weight: 600;
        }
        .right-bt {
          padding: 0;
          margin: initial;
          width: 152rpx;
          height: 60rpx;
          border: 2rpx solid #f60313;
          border-radius: 120rpx;

          font-size: 26rpx;
          color: #f0250e;
        }
        .display {
          color: #999;
          border-color: #999;
        }
      }
    }
  }
  > view:nth-child(2) {
    .item {
      view {
        color: #bfbfbf !important;
      }
    }
  }
  .bottom-button {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 0 30rpx;
    width: 100%;
    height: calc(env(safe-area-inset-bottom) + 100rpx);
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;
    > view:nth-child(1) {
      color: #f0250e;
    }
    > view:nth-child(2) {
      width: 226rpx;
      line-height: 76rpx;
      text-align: center;
      background: #f0250e;
      border-radius: 120rpx;
      font-size: 26rpx;
      font-weight: bold;
      color: #ffffff;
    }
  }
}
</style>
